import React, { memo, useEffect } from 'react'

import { useSelector, useDispatch, shallowEqual } from 'react-redux'

import{ 
  HotRecommendWrapper
} from './style'

import WYThemeHeaderRcm from '@/components/theme-header-rcm'
import { getHotRecommendAction } from '../../store/actionCreators'
import { HOT_RECOMMEND_LIMIT } from '@/common/contants'
import WYSongsCover from '@/components/songs-cover'

export default memo(function WYHotRecommend() {
    // state

    // redux hooks
    const { hotRecommends } = useSelector(state => ({
      hotRecommends: state.getIn(["recommend", "hotRecommends"])
    }), shallowEqual)
    const dispatch = useDispatch()

    // other hooks
    useEffect(()=>{
      dispatch(getHotRecommendAction(HOT_RECOMMEND_LIMIT))
    }, [dispatch])

    return (
        <HotRecommendWrapper>
          <WYThemeHeaderRcm title="热门推荐" keywords={['华语', '流行', '民谣', '摇滚', '电子']}/>
          <div className='recommend-list'>
            {
              hotRecommends.map((item, index) => {
                return <WYSongsCover key={item.id} info={item} />
              })
            }
          </div>
        </HotRecommendWrapper>
    )
})
